<script setup lang="ts">
// 导入类型
import type {WaveListItemType} from "@/components/st-wave/types/wave-list-item"

// 定义组件参数
const props = withDefaults(
    defineProps<{
      // 整个的组件的高度
      height: string,
      // 组件中的内容区域是否被波浪覆盖
      isWaveCover: boolean,
      // 图片列表
      waveList: WaveListItemType[]
    }>(),
    {
      height: '500rpx',
      isWaveCover: true,
    }
)
</script>

<template>
  <!-- 波浪组件 -->
  <view class="st-wave" :style="{height}">
    <!-- 波浪组件中的内容区域 -->
    <view class="st-wave__content" :style="{zIndex: isWaveCover ? 0 : 1}">
      <slot></slot>
    </view>
    <!-- 波浪组件中的波浪 -->
    <view
        class="st-wave__wave"
        v-for="(item, idx) in waveList"
        :key="idx"
        :style="{
          height: item.height,
          backgroundImage: `url(${item.url})`,
          backgroundSize: `50% ${item.height}`,
          opacity: item.opacity,
          animationDuration: `${item.animation.duration}ms`,
          animationDelay: item.animation.delay ? 0 : `${item.animation.delay}ms`
        }"
    ></view>
  </view>
</template>

<style scoped lang="scss">
// 波浪组件
.st-wave {
  position: relative;
  width: 100%;
  overflow: hidden;

  // 波浪组件中的内容区域
  .st-wave__content {
    position: relative;
    width: 100%;
    height: 100%;
  }

  // 波浪组件中的波浪
  .st-wave__wave {
    position: absolute;
    left: 0;
    bottom: 0;
    // 让波浪盒子的宽度为父元素的两倍，再让背景波浪图片x轴重复，
    // 移动动画中只移动自身的50%，即原来波浪的宽度，这样子第二次
    // 重复播放动画时，不会有背景图片突然跳转移动的突兀感
    // 为了更好的动画效果，波浪图片的左边界与右边界需要连贯
    width: 200%;
    background-repeat: repeat-x;
    // 背景图片定位在底部
    background-position: 0 bottom;
    // 变化的原点指定为底部中间
    transform-origin: bottom center;
    animation-name: waveMove;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
}

// 波浪移动动画
// x轴位移：实现波浪运动效果
// y轴缩放：实现波浪起伏效果
@keyframes waveMove {
  0% {
    transform: translateX(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) scaleY(0.5);
  }
  100% {
    transform: translateX(-50%) scaleY(1);
  }
}
</style>